<template>
  <view class="home">
    <!-- 轮播图区域 -->
    <swiper indicator-dots circular>
      <swiper-item v-for="item in swipers" :key="item.id">
        <image src="item.img"></image>
      </swiper-item>
    </swiper>
    <!-- 导航区域 -->
    <view class="nav">
      <view class="nav_item" v-for="(item, index) in navs" :key="index" @click="navItemClick(item.path)">
        <view :class="item.icon"></view>
        <text>{{item.title}}</text>
      </view>
    </view>
    <!-- 推荐商品 -->
    <view class="hot_goods">
      <view class="tit">推荐商品</view>
      <goods-list @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
    </view>
  </view>
</template>

<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
  data() {
    return {
      swipers: [],
      goods: [],
      navs: [
        {
          icon: 'iconfont icon-ziyuan',
          title: '黑马超市',
          path: '/pages/goods/goods'
        },
        {
          icon: 'iconfont icon-guanyuwomen',
          title: '联系我们',
          path: '/pages/contact/contact'
        },
        {
          icon: 'iconfont icon-tupian',
          title: '社区图片',
          path: '/pages/pics/pics'
        },
        {
          icon: 'iconfont icon-shipin',
          title: '学习视频',
          path: '/pages/videos/videos'
        }
      ]
    }
  },
  onLoad() {
    this.getSwipers()
    this.getHotGoods()
  },
  components: {"goods-list":goodsList},
  methods: {
    // 获取轮播图的数据
    async getSwipers () {
      const res = await this.$myRequest({
        url: '/api/getlunbo'
      })
      this.swipers = res.data.message
    },
    // 获取热门商品列表数据
    async getHotGoods () {
      const res = await this.$myRequest({
        url: '/api/getgoods?pageindex=1'
      })
      this.goods = res.data.message
    },
    // 导航点击的处理函数
    navItemClick (url) {
      uni.navigateTo({
        url
      })
    },
	goGoodDetail (id) {
		uni.navigateTo({
			url:'/pages/goods-detail/goods-detail?id'=+id
		})
	}
  } 
}
			
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
